import * as React from 'react';
import { inject, observer } from 'mobx-react'
import { Route, Redirect, HashRouter as Router } from 'react-router-dom'

import routerConfig from "./config";
import { IUserStore } from '../store/user';
import ILayout from '../components/ILayout';

type Props = {
    userStore?: IUserStore,
}

@inject("userStore")
@observer
class BasicRoute extends React.Component<Props, {}>{
    public render() {
        const { isLogin } = this.props.userStore;
        return <Router>
            {
                routerConfig.map((item, i) => {
                    return <Route
                        key={i}
                        path={item.path}
                        exact={item.exact}
                        render={props => {

                            if (item.auth) {
                                return isLogin ? <ILayout  {...props}>
                                    <item.component  {...props} />
                                </ILayout> : <Redirect
                                        to={{
                                            pathname: "/login",
                                            state: { from: props.location }
                                        }}
                                    />
                            } else {
                                return <item.component {...props} />
                            }

                        }}
                    />
                })
            }
        </Router>
    }
}

export default BasicRoute;